<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="物美价廉，品质有保障">
    <meta name="description" content="物美价廉，品质有保障">
    <title>万宝购物网站</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./assets/slick/slick.css">
    <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript" src="js/main.js"></script>


    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="ele-2.15.7/index.js"></script>
</head>

<style>

    .shortcut .wrapper ul li:hover a{
        color: #c81623;
    }

    .shortcut .wrapper ul li a {
        font-size: 14px;
        color: #fff;
    }

    .shortcut .wrapper ul li:hover::after{
        color: #c81623;
    }

    /*顶部标签*/
    .nav{
        margin-left: 160px;

    }

    .nav li {
        margin-left: 20px;
    }

    /* 下拉内容（默认隐藏） */
    .nav2 {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        width: 120px;
        height: 100px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        margin-top: 23px;
    }

    /* 下拉链接 */
    .nav2 a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        margin-top: 10px;
    }

    /* 悬停时更改下拉链接的颜色 */
    .nav2 a:hover {background-color: #f1f1f1}

    /* 悬停时显示下拉菜单 */
    .nav1:hover .nav2 {
        display: block;
    }


    /* 下拉内容（默认隐藏） */
    .nav4 {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        width: 120px;
        height: 100px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        margin-top: 23px;
    }

    /* 下拉链接 */
    .nav4 a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        margin-top: 10px;
    }

    /* 悬停时更改下拉链接的颜色 */
    .nav4 a:hover {background-color: #f1f1f1}

    /* 悬停时显示下拉菜单 */
    .nav3:hover .nav4 {
        display: block;
    }

    /* 下拉内容（默认隐藏） */
    .nav6 {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        width: 120px;
        height: 100px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        margin-top: 23px;
    }

    /* 下拉链接 */
    .nav6 a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        margin-top: 10px;
    }

    /* 悬停时更改下拉链接的颜色 */
    .nav6 a:hover {background-color: #f1f1f1}

    /* 悬停时显示下拉菜单 */
    .nav5:hover .nav6 {
        display: block;
    }

    .image {
        width: 100%;
        display: block;
    }

    #top-search{
        height: 26px;
        border: none;
        width: 630px;
        padding: 5px 0px 6px 16px;
        margin-top: 5px;
        margin-left: 3px;
    }

    #from-search{
        height: 37px;
        width: 690px;
        margin-left: 600px;
        margin-top: 20px;
        display: inline-block;
        border-radius: 15px;
        border: 1px solid black;

    }

    #from-search a{
        background: url(images/search.png) no-repeat 5px center;/*5px -->离左边距离  center:上下*/
        background-size: 20px 20px;
        height: 19px;
        display: inline-block;
        padding-bottom: 25px;

    }
    #from-search a span{
        visibility: hidden;
    }
    /*鼠标悬停在a标签上样式的效果*/
    #from-search a:hover{
        background: url(images/search_black.png) no-repeat 6px center;/*5px -->离左边距离  center:上下*/;
        background-size: 20px 20px;
    }
    #header{
        margin-top: 10px;
    }

    .el-row {
        margin-bottom: 20px;
    }
    .el-col {
        border-radius: 4px;
        margin: 8px;
        width: 230px;
        height: 310px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 6px 6px;
        background-color: #f9fafc;
        margin-bottom: 10px;
        height: 310px;
    }
    .el-card__body{
        height: 310px;
    }

    .banner{
        background-color: white;
    }

    .goods{
        margin-top: 50px;
    }




    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 500px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 500px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>
<body>
<!-- 快捷导航栏区域 -->
<div id="app">

<div class="shortcut" >
    <div class="wrapper">
        <ul>
            <li class="nav1"><a href="index.html" >我的万宝</a>
<!--                <div class="nav2">-->
<!--                    <div><a href="#">服务流程</a></div>-->
<!--                    <div><a href="#">开店时间</a></div>-->
<!--                </div>-->
            </li>
            <li><a :href="'cart/cart.html?uid='+uid" >购物车</a></li>
            <li class="nav3"><a href="#" >商品收藏</a>
<!--                <div class="nav4">-->
<!--                    <div><a href="#">收藏的宝贝</a></div>-->
<!--                    <div><a href="#">收藏的店铺</a></div>-->
<!--                </div>-->
            </li>
            <li><a href="ProductCategory.html" >商品分类</a></li>
            <li class="nav5"><a href="#" >联系客服</a>
<!--                <div class="nav6">-->
<!--                    <div><a href="#">消费者客服</a></div>-->
<!--                    <div><a href="#">卖家客服</a></div>-->
<!--                    <div><a href="#">意见反馈</a></div>-->
<!--                </div>-->
            </li>
            <li><a :href="'PersonalCenter.html?uid='+uid">个人中心</a></li>
        </ul>
    </div>
</div>


<!-- 头部区域 -->
    <div>
    <from id="from-search">
            <input  type="text" id="top-search">
            <span style="color: #ccc;">|</span>
            <a href="#"><span >搜索</span></a>
        </from>



    </div>

<!-- banner区域 -->
<div class="banner">
    <div class="wrapper">
        <!--种类标签-->
        <div class="nav">
            <ul>
                <li v-for=" type in typesOption"><a href="#">{{type.label}}</a></li>
            </ul>
        </div>

        <ul>
            <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
        </ul>


        <!-- 侧边栏区域 -->
<!--        <div class="aside">-->
<!--            <ul>-->
<!--                <li><a href="">生鲜<span>水果 蔬菜</span></a></li>-->
<!--                <li><a href="">生鲜<span>水果 蔬菜</span></a></li>-->
<!--                <li><a href="">生鲜<span>水果 蔬菜</span></a></li>-->
<!--                <li><a href="">生鲜<span>水果 蔬菜</span></a></li>-->
<!--                <li><a href="">生鲜<span>水果 蔬菜</span></a></li>-->
<!--                <li><a href="">生鲜<span>水果 蔬菜</span></a></li>-->
<!--                <li><a href="">生鲜<span>水果 蔬菜</span></a></li>-->
<!--                <li><a href="">生鲜<span>水果 蔬菜</span></a></li>-->
<!--                <li><a href="">生鲜<span>水果 蔬菜</span></a></li>-->
<!--                <li><a href="">生鲜<span>水果 蔬菜</span></a></li>-->
<!--            </ul>-->
<!--        </div>-->
        <!-- 箭头区域 -->
        <a class="prev"></a>
        <a class="next"></a>
        <!-- 底部圆点区域 -->
        <ol class=".indicator">
            <li></li>
            <li></li>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>

    </div>

</div>
<!-- 新鲜好物区域 -->
<div class="goods wrapper" >
    <div class="hd">
        <h2>好物推荐<span>品质靠谱 质量保障</span></h2>
        <a href="#">查看全部</a>
    </div>
    <div class="hb clearfix">

        <el-row :gutter="20" :data="Data">
            <el-col :span="4" v-for="item, index in Data" :key="index" :offset="index > 0 ? index : 0" >
                <a :href="'detail.html?proid='+item.proid+'&uid='+uid"  >
                    <el-card :body-style="{ padding: '0px' }"  >
                        <img :src="item.image" class="image">
                    <div style="padding: 2px 0px;">
                        <span>好吃的{{item.proname}}</span>
                    </div>
                        <div>
                            <span>到手价:{{item.price}}元</span>
                        </div>
                        <div>
                            <span v-if="item.quantity==null">月销:0</span>
                            <span v-else>月销:{{item.quantity}}</span>
                        </div>
                    </el-card>
                </a>
            </el-col>
        </el-row>
    </div>
</div>
<!--生鲜区域 -->
<div class="shengxian wrapper">
    <div class="hd">
        <h2>{{clothingName}}</h2>
        <a href="#" class="more">查看全部</a>
        <ul>
            <li v-for="item in clothingData"><a :href="'login.html?typedetailid='+item.typedetailid">{{item.name}}</a></li>

        </ul>
    </div>

    <div class="hb clearfix">
        <div class="left" v-for="index in images.data2">
            <a href="#"><img :src="index.image" style="width: 240px; height: 610px"></a>
        </div>
        <div class="right">
            <ul>
                <ul>
                    <li v-for="item in clothingData"><a :href="'login.html?proid='+item.typedetailid"> <img :src="item.image" alt="">
                        <p>红功夫 麻辣小龙虾1.5kg <br>
                            4-6钱/25-32只 <br>
                            火锅食材 </p>
                        <div>￥<span>59</span></div>
                    </a></li>
                </ul>
            </ul>
        </div>
    </div>
</div>
<!-- 版权区域 -->
<div class="footer">
    <div class="wrapper">
        <div class="top">
            <ul>
                <li><span>价格亲民</span></li>
                <li><span>价格亲民</span></li>
                <li><span>价格亲民</span></li>
            </ul>
        </div>
        <div class="bottom">
            <p>
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
                <a href="#">关于我们</a>|
            </p>
            <p>CopyRight @ 小兔鲜儿"</p>
        </div>
    </div>
</div>
</div>

</body>
<!--<script src="js/jquery-1.9.0.js"></script>-->
<scrip src="'./assets/slick/slick.min.js"></scrip>
<script>

    var v = new Vue({
        el : "#app",
        data : {
            Data :[],
            images: {},
            typesOption :[],
            clothingData  : [],
            clothingName : "服装",
            uid : "",
        },
        methods: {
            query(){
                axios.get("NewProductRecommendServlet.s", {
                    params: {
                    }
                }).then(res => {
                    this.Data = res.data;
                });
                axios.get("QueryIndexImagesServlet.s", {
                    params: {
                    }
                }).then(res => {
                    this.images = res.data;
                });
            },
            //查询商品大类
            queryType(){
                axios.get("QueryTypeNameServlet.s",null).then(res=>{
                    this.typesOption = res.data;
                })
            },
            queryClothing() {
                axios.get("QueryClothingTypeServlet",{
                    params: {
                        name : this.clothingName,
                    }
                }).then(res=>{
                    this.clothingData = res.data;
                })
            },
            getUid(){
                //对获取的url进行解码
                var url  = decodeURI(location.search);
                let arr = [];// 存储参数的数组
                let res = {};// 存储最终JSON结果对象
                arr = url.split("?")[1].split("&");//获取地址栏的参数
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].indexOf("=")!=-1){
                        let str = arr[i].split("=");
                        res[str[0]] = str[1];
                    }else{//参数中无值
                        res[arr[i]]="";
                    }
                }
                this.uid = res.uid;
            },
        },
        created() {
            this.query();
            this.queryType();
            this.queryClothing();
            this.getUid();
        }
    })
</script>
</html>